<template>
  <div class="app-container">
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>联系我们</span>
      </div>
      <el-form ref="dataForm" :rules="modelRules" :model="model">
        <el-form-item prop="body">
          <tinymce v-model="model.body" :height="500"></tinymce>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :loading="isSubmitLoading" @click="save()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getContactSetting, updateContactSetting } from "@/api/settings";
import Tinymce from "@/components/Tinymce";

export default {
  name: "Content",
  components: { Tinymce },
  data() {
    return {
      isSubmitLoading: false,
      model: {
        body: null
      },
      modelRules: {
        body: [{ required: true, trigger: "blur", message: "请输入内容" }]
      }
    };
  },
  created() {
    this.getContact();
  },
  methods: {
    getContact() {
      getContactSetting().then(result => {
        this.model.body = result.body;
      });
    },
    save() {
      this.isSubmitLoading = true;
      this.$refs["dataForm"].validate(valid => {
        if (!valid) {
          this.isSubmitLoading = false;
          this.$message({ message: this.$t("formIsNotValidMessage"), type: "warning" });
          return;
        }

        updateContactSetting(this.model).then((result) => {
          this.$message({ message: '操作成功', type: "success" });
          this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
        }).finally(() => {
          this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
        })
      });
    }
  }
};
</script>
